<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>人参产品溯源查询</title>
<style>
    body {
        font-family: 'Microsoft YaHei', Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;
    }
    .header {
        background-color: #3a7ca5;
        color: white;
        padding: 20px;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
    }
    .content {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .search-container {
        text-align: center;
        margin-bottom: 30px;
    }
    .search-input {
        padding: 12px 20px;
        font-size: 16px;
        width: 400px;
        border: 2px solid #ddd;
        border-radius: 4px 0 0 4px;
        outline: none;
    }
    .search-btn {
        padding: 12px 24px;
        font-size: 16px;
        background-color: #3a7ca5;
        color: white;
        border: none;
        border-radius: 0 4px 4px 0;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    .search-btn:hover {
        background-color: #2f6482;
    }
    .search-results {
        margin-top: 30px;
        min-height: 200px;
    }
    .traceability-info {
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
        margin-top: 20px;
    }
    .info-item {
        margin-bottom: 12px;
        font-size: 14px;
    }
    .info-label {
        font-weight: bold;
        color: #333;
        display: inline-block;
        width: 120px;
    }
    .info-value {
        color: #666;
    }
    .no-result {
        text-align: center;
        color: #999;
        padding: 40px;
        font-size: 16px;
    }
    .error-message {
        color: #e74c3c;
        text-align: center;
        padding: 20px;
        font-size: 16px;
    }
    .trace-code-input-wrapper {
        display: inline-block;
    }
    .traceability-heading {
        text-align: center;
        color: #333;
        margin-bottom: 20px;
        font-size: 20px;
    }
</style>
</head>
<body>
    <%@ include file="consumer_navbar.jsp" %>
     <!-- 页面标题 -->
    <div class="header">
        参生智控——人参生态质控与溯源系统
    </div>
    <!-- 页面内容 -->
    <div class="content">
        <h2 class="traceability-heading">人参产品溯源查询</h2>
        <!-- 溯源码搜索框 -->
        <div class="search-container">
            <div class="trace-code-input-wrapper">
                <input type="text" id="trace-code-input" class="search-input" placeholder="请输入人参产品溯源码" />
            </div>
            <button onclick="queryTraceability()" class="search-btn">查询溯源</button>
        </div>
        <!-- 显示溯源结果 -->
        <div id="traceability-result" class="search-results">
            <!-- 溯源结果会显示在这里 -->
        </div>
    </div>

    <script>
        // 溯源码查询函数
        function queryTraceability() {
            const traceCode = document.getElementById('trace-code-input').value.trim();
            const resultContainer = document.getElementById('traceability-result');
            
            if (!traceCode) {
                resultContainer.innerHTML = '<div class="error-message">请输入溯源码</div>';
                return;
            }
            
            // 显示加载状态
            resultContainer.innerHTML = '<div class="no-result">查询中，请稍候...</div>';
            
            // 发送AJAX请求到后端接口
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '${pageContext.request.contextPath}/consumer/traceability/query', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        try {
                            const response = JSON.parse(xhr.responseText);
                            if (response.success && response.data) {
                                // 显示溯源信息
                                displayTraceabilityInfo(response.data);
                            } else {
                                // 显示错误信息
                                resultContainer.innerHTML = '<div class="error-message">' + (response.message || '未找到该溯源码的相关信息') + '</div>';
                            }
                        } catch (e) {
                            resultContainer.innerHTML = '<div class="error-message">查询失败：解析响应数据出错</div>';
                        }
                    } else {
                        resultContainer.innerHTML = '<div class="error-message">查询失败：网络错误</div>';
                    }
                }
            };
            xhr.send('traceCode=' + encodeURIComponent(traceCode));
        }
        
        // 显示溯源信息
        function displayTraceabilityInfo(data) {
            const resultContainer = document.getElementById('traceability-result');
            let html = '<div class="traceability-info">';
            html += '<h3 style="text-align: center; color: #3a7ca5; margin-bottom: 20px;">人参产品溯源信息</h3>';
            
            // 遍历溯源信息中的所有字段
            const fields = [
                {label: '溯源码', key: 'traceCode'},
                {label: '批次号', key: 'batchNo'},
                {label: '产品名称', key: 'productName'},
                {label: '产品类型', key: 'productType'},
                {label: '种植基地', key: 'plantingBase'},
                {label: '种植时间', key: 'plantingTime'},
                {label: '收获时间', key: 'harvestTime'},
                {label: '加工时间', key: 'processingTime'},
                {label: '加工企业', key: 'processingEnterprise'},
                {label: '生产日期', key: 'productionDate'},
                {label: '保质期', key: 'shelfLife'},
                {label: '质检状态', key: 'qualityStatus'},
                {label: '包装信息', key: 'packagingInfo'},
                {label: '存储条件', key: 'storageCondition'},
                {label: '备注信息', key: 'remarks'}
            ];
            
            fields.forEach(field => {
                const value = data[field.key] || '未提供';
                html += `<div class="info-item">
                            <span class="info-label">${field.label}：</span>
                            <span class="info-value">${value}</span>
                         </div>`;
            });
            
            html += '</div>';
            resultContainer.innerHTML = html;
        }
        
        // 监听回车键
        document.getElementById('trace-code-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                queryTraceability();
            }
        });
    </script>
</body>
</html>